<template>
  <div class="home">
    <div class="order" v-if="dataList.length > 0">
      <div
        class="order_item"
        v-for="(item, index) in dataList"
        @click="goDetail(item)"
      >
        <div class="order_status">
          {{ item.state == 1 ? "已支付" : "待支付" }}
        </div>
        <div class="orderbox">
          <div class="order_lt">
            <img class="order_img" :src="item.imageList" />
          </div>
          <div class="order_rt">
            <div class="order_tt">{{ item.name }}</div>
            <div class="order_num">x1</div>
            <div class="order_price">¥{{ item.price }}</div>
          </div>
        </div>
        <div class="order_info">
          <div class="order_time">{{ item.createTime }}</div>
          <div class="order_allPrice">
            实付款<span class="txt">¥{{ item.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-empty class="noContent" description="暂无数据" v-else />

    <div class="footer">
      <div class="footerbox">
        <div
          class="menu_item"
          :class="menuIndex == index ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="index"
          @click="goRouter(item, index)"
        >
          <img
            class="menu_icon"
            :src="menuIndex == index ? item.img2 : item.img"
          />
          <div class="menu_name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonApi from "@/api/commonApi";
import { getCookies, getQueryString } from "@/utils/util.js";
import { Empty } from "vant";
import nav1 from "@/assets/images/nav1.png";
import nav1_check from "@/assets/images/nav1_check.png";
import nav2 from "@/assets/images/nav2.png";
import nav2_check from "@/assets/images/nav2_check.png";
import main from "@/assets/images/main.jpg";
export default {
  components: {
    Empty,
  },
  data() {
    return {
      dataList: [],

      menuList: [
        { img: nav1, img2: nav1_check, name: "商城", url: "/home" },
        { img: nav2, img2: nav2_check, name: "订单", url: "/order" },
      ],
      menuIndex: 1,
    };
  },

  mounted() {
    if (getQueryString("uta")) {
      localStorage.setItem("uta", getQueryString("uta"));
    }
    this.getUserOrder();
  },

  methods: {
    getUserOrder() {
      commonApi.getUserOrder({ userId: getCookies("userId") }).then((res) => {
        if (res && res.length != 0) {
          this.dataList = res;
        }
      });
    },
    goDetail(item) {
      // localStorage.setItem('orderId', item.orderId)
      this.$router.push({
        path: "/orderDetail",
        query: { orderId: item.orderId },
      });
    },

    goRouter(data) {
      this.$router.push(data.url);
    },
  },
};
</script>
<style>
body {
  background: #f6f5fa;
}
</style>
<style lang="less" scoped="">
.home {
  margin: auto;
  background: #f6f5fa;
  padding-bottom: 60px;

  .banner {
    img {
      width: 100%;
      display: block;
    }
  }

  .order {
    padding: 15px;

    .order_item {
      background: #fff;
      border-radius: 7px;
      padding: 15px;
      margin-bottom: 10px;

      .order_status {
        text-align: center;
        font-size: 12px;
        border: 1px solid #dfdfdf;
        float: right;
        padding: 8px 10px;
        border-radius: 3px;
        margin-bottom: 10px;
        color: #666;
      }

      .orderbox {
        clear: both;
        display: flex;

        .order_lt {
          width: 90px;
          height: 90px;
          border-radius: 8px;
          overflow: hidden;

          .order_img {
            width: 100%;
          }
        }

        .order_rt {
          flex: 1;
          padding-top: 10px;
          padding-left: 10px;
          position: relative;

          .order_tt {
            font-size: 15px;
            font-weight: 400;
          }

          .order_num {
            position: absolute;
            right: 0;
            bottom: 25px;
            font-size: 14px;
          }

          .order_price {
            position: absolute;
            right: 0;
            font-size: 14px;
            bottom: 0;
            font-weight: 500;
          }
        }
      }

      .order_info {
        border-top: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: center;
        padding-top: 10px;

        .order_time {
          font-size: 12px;
          color: #666;
        }

        .order_allPrice {
          font-size: 14px;

          .txt {
            color: #f53939;
            font-weight: 500;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;

    .footerbox {
      display: flex;

      margin: auto;
      max-width: 500px;
    }

    .menu_item {
      color: #999faa;
      width: 50%;
      text-align: center;
      padding: 10px 0;

      .menu_icon {
        display: block;
        margin: auto;
        width: 20px;
      }

      .menu_name {
        font-size: 12px;
        margin-top: 5px;
      }

      &.active {
        color: #f53939;
      }
    }
  }
}

.noContent {
  margin-top: 2rem;
  background: none;
}
</style>
